import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { withRouter,  Link } from 'dva/router';
import { WingBlank, WhiteSpace, ListView, Card } from 'antd-mobile';
import styles from './styles.less';

const ArticleListPage = (props) => {

  return (
    <WingBlank size="md">
      {!props.list ? "":props.list.map((article, i) =>
        <a href={article.content} key={i} target="_blank">
          <Card className={styles.articleItem}>
            <Card.Header
              title={
                <h3 className={styles.articleTitle} key="title">
                  {article.title}
                </h3>
              } />
          </Card>
        </a>
      )}
    </WingBlank>
  );
};

const mapStateToProps = ({ article: { list, detail } }) => ({
  list,
  detail,
});

export default connect(mapStateToProps)(withRouter(ArticleListPage));

// <Link
//   key={i}
//   to={{
//     pathname: `${props.location.pathname}/${article.id}`,
//     state: { title: '养生学堂' },
//   }}>
//   <Card className={styles.articleItem}>
//     <Card.Header
//       title={[
//         <h3 className={styles.articleTitle} key="title">
//           {article.title}
//         </h3>,
//         <time className={styles.articleTime} key="time">
//           {article.timestamp}
//         </time>
//       ]} />
//     <Card.Body className={styles.articleBody}>
//       {article.summary}
//     </Card.Body>
//   </Card>
// </Link>
// const articles = [{
//     id: 1,
//     title: '乳腺增生、肥胖、痤疮及各种常见疾病',
//     timestamp: '2016.11.20 11:20',
//     summary: '推拿疗法、刮痧疗法、拔罐疗法都是根据人们的实际情况，以双手或借助其他器具在他人或自己身体对应的经络、穴位、痛点上，直接、间接地运用各种合理的肢体活动及手法来强身健体、缓痛祛疾的一种方法。',
//   }, {
//     id: 2,
//     title: '乳腺增生、肥胖、痤疮及各种常见疾病',
//     timestamp: '2016.11.20 11:20',
//     summary: '推拿疗法、刮痧疗法、拔罐疗法都是根据人们的实际情况，以双手或借助其他器具在他人或自己身体对应的经络、穴位、痛点上，直接、间接地运用各种合理的肢体活动及手法来强身健体、缓痛祛疾的一种方法。',
//   }, {
//     id: 3,
//     title: '乳腺增生、肥胖、痤疮及各种常见疾病',
//     timestamp: '2016.11.20 11:20',
//     summary: '推拿疗法、刮痧疗法、拔罐疗法都是根据人们的实际情况，以双手或借助其他器具在他人或自己身体对应的经络、穴位、痛点上，直接、间接地运用各种合理的肢体活动及手法来强身健体、缓痛祛疾的一种方法。',
//   }];
